<template>
  <div class="projectDetailWrapper">
    <div class="projectDetailContent">
      <div class="topBox">
        <div
          class="img"
          :style="{ backgroundImage: `url(${currentData?.coverImgUrl})` }"
        ></div>
        <div class="info">
          <div class="title">
            {{ currentData.name || '' }}
          </div>
          <div
            class="describe"
            v-html="renderMarkDown(currentData.describe || '')"
          ></div>
          <div
            class="customBtn"
            @click="handleClick({ name: '项目链接' })"
            v-if="currentData.template == 0 && currentData.resultLink"
          >
            <img src="@/assets/link.png" alt="" />
            {{ t('projectDetail', '项目成果链接') }}
          </div>
        </div>
      </div>
      <div class="content">
        <div
          class="subTitle"
          v-if="
            currentData.template == 0 &&
            currentData.newProjectResultFileList &&
            currentData.newProjectResultFileList.length
          "
        >
          <img src="@/assets/titleIcon.png" alt="" />
          {{ t('projectDetail', '项目成果展示') }}
        </div>
        <div
          class="item"
          v-if="
            currentData.template == 0 &&
            currentData.newProjectResultFileList &&
            currentData.newProjectResultFileList.length
          "
        >
          <div class="value">
            <a-carousel arrows>
              <template #prevArrow>
                <div
                  class="custom-slick-arrow"
                  style="
                    left: 10px;
                    z-index: 1;
                    font-size: 30px;
                    color: #d2ccdd;
                  "
                >
                  <LeftCircleOutlined />
                </div>
              </template>
              <template #nextArrow>
                <div
                  class="custom-slick-arrow"
                  style="right: 20px; font-size: 30px; color: #d2ccdd"
                >
                  <RightCircleOutlined />
                </div>
              </template>
              <div
                class="imagesBox"
                v-for="(item, index) in currentData.newProjectResultFileList"
              >
                <div class="img">
                  <img
                    :src="item[0]?.fileUrl"
                    @click.stop=";(visible = true), (current = index * 2 + 0)"
                  />
                </div>
                <div class="img">
                  <img
                    :src="item[1]?.fileUrl"
                    @click.stop=";(visible = true), (current = index * 2 + 1)"
                  />
                </div>
              </div>
            </a-carousel>
          </div>
        </div>

        <div class="subTitle">
          <img src="@/assets/titleIcon.png" alt="" />
          {{ t('projectDetail', '项目岗位') }}
        </div>
        <div class="projectJobBox">
          <div class="item" v-for="item in currentData.projectJobList">
            <div class="name">{{ item.name }}</div>
            <div class="skill"
              >{{ t('projectDetail', '技能要求') }}:{{ item.skill }}</div
            >
            <div class="requiredNum"
              >{{ t('projectDetail', '共招') }} {{ item.requiredNum || '' }}
              {{ t('projectDetail', '人') }}</div
            >
          </div>
        </div>
        <div class="subTitle">
          <img src="@/assets/titleIcon.png" alt="" />
          {{ t('projectDetail', '主指导老师') }}
        </div>
        <div class="teacherBox">
          <div class="teacherItem">
            <img src="@/assets/user.png" />
            <div>
              <div>{{ currentData?.mainTeacher?.teacherName }}</div>
            </div>
          </div>
        </div>

        <div class="subTitle" v-if="currentData?.coTeacherList?.length">
          <img src="@/assets/titleIcon.png" alt="" />
          {{ t('projectDetail', '副指导老师') }}
        </div>
        <div class="teacherBox">
          <div
            class="teacherItem"
            v-for="item in currentData?.coTeacherList"
            :key="item.id"
          >
            <img src="@/assets/user.png" />
            <div>
              <div>{{ item.teacherName }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="item" >
					<div class="label">
						评分标准
					</div>
					<div class="value">
						<div v-html="currentData.scoreStandard||'暂无' "></div>
					</div>
				</div> -->

        <div class="subTitle">
          <img src="@/assets/titleIcon.png" alt="" />
          {{ t('projectDetail', '详细信息') }}
        </div>
        <div class="group">
          <div class="item">
            <div class="cell">
              <div class="label"> {{ t('projectDetail', '所属年级') }}</div>
              <div class="value">{{ currentData.grade || '' }}</div>
            </div>
            <div class="cell">
              <div class="label">{{ t('projectDetail', '所属班级') }}</div>
              <div class="value">{{
                formatClass(currentData.gradeClassList) || ''
              }}</div>
            </div>
            <div class="cell">
              <div class="label">{{ t('projectDetail', '项目难度') }}</div>
              <div class="value">
                <a-rate
                  :value="currentData.difficulty"
                  disabled
                  style="font-size: 14px"
              /></div>
            </div>
            <div class="cell">
              <div class="label">{{ t('projectDetail', '项目类型') }}</div>
              <div class="value">{{ currentData.categoryName }}</div>
            </div>
            <div class="cell">
              <div class="label">{{ t('projectDetail', '项目模板') }}</div>
              <div class="value">{{
                currentData.template == 1
                  ? t('projectDetail', '多组协作')
                  : t('projectDetail', '经典')
              }}</div>
            </div>
          </div>
          <div class="item">
            <div class="cell" v-if="currentData.template == 1">
              <div class="label"
                >{{ t('projectDetail', '小组人数设置') }} |
                {{ t('projectDetail', '成员总数') }}</div
              >
              <div class="value"
                >{{ currentData.groupMemberLimit }} |
                {{ currentData.totalMemberLimit }}</div
              >
            </div>
            <div class="cell" v-else>
              <div class="label">{{ t('projectDetail', '成员总数') }}</div>
              <div class="value">{{ currentData.totalMemberLimit }}</div>
            </div>
            <div class="cell">
              <div class="label">{{ t('projectDetail', '开发模型') }}</div>
              <div class="value">{{ currentData.devModelName }}</div>
            </div>
            <div class="cell">
              <div class="label">{{ t('projectDetail', '课程') }}</div>
              <div class="value">{{
                formatCourse(currentData.courseList)
              }}</div>
            </div>

            <div class="cell">
              <div class="label">{{ t('projectDetail', '项目周期') }}</div>
              <div class="value"
                >{{ currentData.startTime || '' }} ~
                {{ currentData.endTime || '' }}</div
              >
            </div>
            <div class="cell">
              <div class="label">{{ t('projectDetail', '报名时间') }}</div>
              <div class="value"
                >{{ currentData.registrationStartTime || '' }} ~
                {{ currentData.registrationEndTime || '' }}</div
              >
            </div>
          </div>
          <div class="item">
            <div class="cell">
              <div class="label">{{t('projectDetail', '评分标准')}}</div>
							<div class="value" v-html="currentData.scoreStandard|| '-' "></div>
            </div>
          </div>
          <div class="item">
            <div class="cell">
              <div class="label">{{ t('projectDetail', '项目目标') }}</div>
              <div class="value"
                ><div v-html="renderMarkDown(currentData.target || '-')"></div
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="buttonGroup">
      <div class="button" @click="handleClick({ name: '编辑' })">{{
        t('common', '编辑')
      }}</div>
      <div
        class="button"
        @click="handleClick({ name: '维护项目成果' })"
        v-if="currentData.template == 0"
        >{{ t('common', '维护项目成果') }}</div
      >
    </div>
  </div>
  <a-image-preview-group
    v-if="visible"
    :preview="{ visible, onVisibleChange: () => (visible = false), current }"
  >
    <a-image
      v-for="item in currentData.projectResultFileList"
      :width="200"
      :style="{ display: 'none' }"
      :src="item.fileUrl"
    />
  </a-image-preview-group>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
import { t } from '@/i18n'
import MarkdownIt from 'markdown-it'
const visible = ref(false)
const current = ref(0)

const { currentData } = defineProps({
  currentData: { type: Object, default: {} },
})
const formatCourse = (courseList) => {
  if (!courseList) return ''
  return courseList.map((item) => item.courseName).join('，')
}
const formatClass = (gradeClassList) => {
  if (!gradeClassList) return ''
  return gradeClassList.map((item) => item.gradeClassName).join('，')
}
const renderMarkDown = (text) => {
  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
  })
  return md.render(text).replace(/<a\s+[^>]*?(?!target=)([^>]*>)/g, function(match, p1) {
    return `<a target="_blank" ${p1}`;
  })
}

const emit = defineEmits()

const handleClick = ({ name }) => {
  switch (name) {
    case '项目链接':
      window.open(currentData.resultLink)
      break
    default:
      emit('handleClick', { name, item: currentData })
      break
  }
}
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
  /* min-height: 0;
	min-width: 0; */
}
.projectDetailWrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
}
.projectDetailContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  width: 0;
  /* padding: 20px; */
  color: #333;
  background: #ffffff;
  border-radius: 10px;
  overflow-y: auto;
  .topBox {
    padding: 20px 20px 0 20px;
    display: flex;
    width: 100%;
    min-height: 208px;
    .img {
      width: 360px;
      max-height: 210px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #f5f5f5;
      background-size: cover;
      background-position: center;
      border-radius: 10px;
      overflow: hidden;
      margin-right: 24px;
    }
    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      width: 100%;
      height: 210px;
      .title {
        width: 100%;
        font-weight: 500;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.85);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .status {
          padding: 7px 13px;
          background: #f1bf46;
          border-radius: 13px;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          margin-left: 12px;
        }
      }

      .describe {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 1.5;
        word-break: break-all;
        overflow: auto;
        width: 100%;
      }
      .customBtn {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 5px 8px;
        font-weight: 400;
        font-size: 14px;
        color: #6d68ee;
        background: #eeeeff;
        border-radius: 4px;
        img {
          margin-right: 6px;
          height: 10px;
        }
      }
    }
  }
  .imagesBox {
    width: 100%;
    height: 200px;
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    .img {
      width: 50%;
      /* border: 1px solid #d7d2e2; */
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        cursor: pointer;
        max-height: 100%;
        max-width: 100%;
      }
    }
  }
  .content {
    height: auto;
    min-height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    .subTitle {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      img {
        width: 14px;
        margin-right: 8px;
      }
    }
    .projectJobBox {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      .item {
        width: 200px;
        padding: 12px 15px;
        background: #ffffff;
        box-shadow: 0px 2px 7px 0px #e3e2ff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        .name {
          font-weight: 500;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
        }
        .skill {
          margin-top: 9px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          word-break: break-all;
          flex-grow: 1;
        }
        .requiredNum {
          margin-top: 9px;
          font-weight: 400;
          font-size: 12px;
          color: #b5acce;
        }
      }
    }
    .teacherBox {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      .teacherItem {
        width: 200px;
        background: #ffffff;
        box-shadow: 0px 2px 7px 0px #e3e2ff;
        border-radius: 6px;
        display: flex;
        align-items: center;
        padding: 12px;
        img {
          width: 45px;
          margin-right: 10px;
        }
      }
    }
    .group {
      display: flex;
      flex-direction: column;
      .item {
        display: flex;
        width: 100%;
        padding: 17px 27px;
        margin-bottom: 16px;
        background: #f7f7ff;
        border-radius: 8px;
        .cell {
          display: flex;
          flex-direction: column;
          min-width: 20%;
          padding: 0 5px;
          .label {
            font-weight: 500;
            font-size: 14px;
            color: rgba(119, 106, 156, 0.85);
          }
          .value {
            font-weight: 500;
            margin-top: 6px;
            line-height: 1.5;
            font-weight: 500;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }
  }
}
.buttonGroup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  .button {
    min-width: 100px;
    max-width: 150px;
    /* word-break: break-all; */
    padding: 8px 12px;
    background: #8466f5;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      background: white;
      color: #8466f5;
    }
  }
}
</style>

<style lang="scss" scoped>
:deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #ecf3fe;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  transition: ease all 0.3s;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}
:deep(.slick-slide h3) {
  color: #fff;
}
</style>

<style lang="scss">
[v-cloak] {
  display: none;
}

.modal {
  .ant-modal-content {
    padding: 0 !important;
  }
}
</style>
